<template>
  <div>
    <pageMain padding="0px" background="transparent">
      

      <div class="header-status-overview">
        <p class="header-status-text">服务器状态</p>
        <div class="header-status-radius">
          <!-- 打勾图标 -->
          <i class="el-icon-success"></i>
        </div>
        
        <!-- 单选按钮 -->
        <el-radio-group v-model="value" size="mini">
          <el-radio-button label="开启"></el-radio-button>
          <el-radio-button label="关闭"></el-radio-button>
        </el-radio-group>
      </div>

      <div class="header-status-overview">

        <p class="header-status-text">服务器运营时间</p>

      </div>


      <chunkTitle title="系统信息">
        <template>
          <div class="form-box">
            <el-form
              ref="form"
              :model="form"
              :label-width="labelWidth"
              :label-position="labelPosition"
            >
              <el-form-item label="系统开关">
                <el-switch
                  v-model="form.value"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                >
                </el-switch>
              </el-form-item>
              <el-form-item label="系统名称">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-form>
          </div>
        </template>
      </chunkTitle>

      <chunkTitle title="用户系统">
        <template>
          <div class="form-box">
            <el-form
              ref="form"
              :model="form"
              :label-width="labelWidth"
              :label-position="labelPosition"
            >
              <el-form-item label="允许注册">
                <el-switch
                  v-model="form.value"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                >
                </el-switch>
              </el-form-item>
              <el-form-item label="允许登录">
                <el-switch
                  v-model="form.value"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                >
                </el-switch>
              </el-form-item>
              <el-form-item label="开放临时用户">
                <el-switch
                  v-model="form.value"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                >
                </el-switch>
              </el-form-item>
              <el-form-item label="注册默认角色">
                <el-switch
                  v-model="form.value"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                >
                </el-switch>
              </el-form-item>
            </el-form>
          </div>
        </template>
      </chunkTitle>
    </pageMain>
  </div>
</template>

<script>
import "../css/system.css";
import chunkTitle from "@/components/chunk-title/chunk-title.vue";
import pageMain from "~/page-main/page-main.vue";
export default {
  components: { pageMain, chunkTitle },

  data() {
    return {
      labelWidth: "100px",
      labelPosition: "left",
      form: {},
    };
  },
};
</script>

<style scoped lang="scss">
.form-box {
  width: 300px;
}

.header-status-overview{

  width: 160px;
  height: 200px;
  background: white;
  margin-bottom: 20px;

  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 30px;

  border-radius: 6px;

  .header-status-radius{

    $color:rgb(11, 100, 217);

    width: 60px;
    height: 60px;
    border-radius:50%;
    border:1px solid $color;
    font-size: 3rem;
    color: $color;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .header-status-text{
    font-size: 1rem;
  }

}
</style>
